<template>
	<div class="navWrap">
    <div class="scroller">
      <ul class="scrollWrap" v-if="tabsData">
        <li v-for="(item,index) in tabsData"
            :key="index"
            :class="{on: currentIndex === index}"
            @click="changeIndex(index)"
        >
          <router-link :to="{name:'tab',params:{id:index}}">{{item.tabName}}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import BSCroll from 'better-scroll'
  export default {
    name: 'index',
    data(){
      return{
        currentIndex: 0
      }
    },
    computed:{
      ...mapState({
        tabsData: state => state.topic.tabsData
      })
    },
    async mounted(){
      this.$nextTick(()=>{
        new BSCroll('.scroller',{
          scrollX: true,
          click: true,
          bounce: false
        })
      })
    },
    methods:{
      changeIndex(index){
        this.currentIndex = index
      }
    },
    
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .navWrap
    font-size 28px
    font-family "Microsoft YaHei UI"
    margin-bottom 20px
    .scroller
      margin-top 95px
      display flex
      .scrollWrap
        background #f4f4f4
        height 72px
        line-height 72px
        display flex
        justify-content: space-between
        li
          height 72px
          float left
          display inline-block
          margin 0 20px
          padding 0 8px
          white-space nowrap
          &.on
            color #b4282d
            &:after
              content '';
              display block;
              height 5px
              background red;
</style>
